import React from 'react';
import {Form, Row, Col, Input, Button, InputNumber, Icon} from 'antd';

class UserSearch extends React.Component{
  constructor(props){
    super(props);
    this.state = {
        expand:false,
    }
  }

  render(){
    const {getFieldDecorator,resetFields,getFieldsValue} = this.props.form;
    const { searchParams, onHandleSearch } = this.props;
    const handleSearch = ()=>{
          onHandleSearch(getFieldsValue());
    }
    const handleReset = ()=>{
          resetFields();
        this.setState(
            {
                searchParams:{}
            }
        )
    }
    return (
      <div>
        <Form className="ant-advanced-search-form" layout="inline">
            <Row>
              <Col span={6}>
                <Form.Item label="姓名">
                  {
                    getFieldDecorator(`name`, {
                        initialValue: searchParams.name || "",
                    })
                      // eslint-disable-next-line
                    (
                      <Input placeholder="请输入搜索的用户名称" />
                    )
                  }
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="年龄">
                  {
                    getFieldDecorator(`smallAge`, {
                        initialValue: searchParams.age || "",
                    })
                      // eslint-disable-next-line
                    (
                     <InputNumber min={1} max={150} />
                    )
                  }
                  <span style={{marginRight:'5px'}}>至</span>
                  {
                    getFieldDecorator(`largeAge`, {
                        initialValue: searchParams.age || "",
                    })
                      // eslint-disable-next-line
                    (
                     <InputNumber min={1} max={120} />
                    )
                  }
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="性别">
                  {
                    getFieldDecorator(`sex`, {
                        initialValue: searchParams.sex || "",
                    })
                      // eslint-disable-next-line
                    (
                      <Input placeholder="请输入搜索的性别" />
                    )
                  }
                </Form.Item>
              </Col>
              <Col span={6}>
                <div style={{textAlign:"right"}}>
                  <Button type="primary" onClick={handleSearch}>查询</Button>
                  <Button style={{ marginLeft: 8 }} onClick={handleReset}>重置</Button>
                  <a
                    style={{ marginLeft: 8, fontSize: 12 }}
                    onClick={()=> this.setState({expand:!this.state.expand})}
                  >
                    更多
                    <Icon type={this.state.expand ? 'up' : 'down'} />
                  </a>
                </div>
              </Col>
            </Row>
            <Row style={{display:this.state.expand ? '' : 'none'}}>
              <Col span={6}>
                <Form.Item label="地址">
                  {
                    getFieldDecorator(`address`, {
                      initialValue: searchParams.address || "",
                    })
                      // eslint-disable-next-line
                    (
                      <Input placeholder="请输入要搜索的地址名称" />
                    )
                  }
                </Form.Item>
              </Col>
            </Row>
        </Form>
      </div>
    )
  }
}
export default Form.create()(UserSearch);
